@inject IAuthorizationService Auth
@inject ManagerLocalizer Localizer

<!-- The Modal -->
<div class="modal fade" id="previewModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title">
                    <i v-if="media.type === 'Audio'" class="fas fa-volume-up"></i>
                    <i v-else-if="media.type === 'Document'" class="fas fa-file-alt"></i>
                    <i v-else-if="media.type === 'Image'" class="fas fa-image"></i>
                    <i v-else-if="media.type === 'Video'" class="fas fa-video"></i>
                    <i v-else-if="media.type === 'Resource'" class="fas fa-box-open"></i>
                    {{ media.filename }}
                </h5>
                <button type="button" class="close" v-on:click.prevent="close">&times;</button>
            </div>

            <!-- Tabs -->
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="pill" href="#pills-preview"><i class="far fa-eye"></i> @Localizer.General["Preview"]</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#pills-details"><i class="fas fa-info-circle"></i> @Localizer.General["Details"]</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#pills-meta"><i class="fas fa-th-list"></i> @Localizer.General["Meta"]</a>
                </li>
                @if ((await Auth.AuthorizeAsync(User, Permission.MediaEdit)).Succeeded)
                {
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#pills-update"><i class="far fa-edit"></i> @Localizer.General["Update"]</a>
                </li>
                }
                @foreach (var action in Piranha.Manager.Actions.Modals.MediaPreview)
                {
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#@action.Uid"><i class="@action.Css"></i> @action.Title</a>
                </li>
                }
            </ul>

            <!-- Modal Body -->
            <div class="modal-body bg-light">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active " id="pills-preview">
                        <template v-if="media.type === 'Image'">
                            <img class="d-block mx-auto mw-100" :src="media.publicUrl" />
                        </template>
                        <template v-else-if="media.type === 'Video'">
                            <video class="d-block mx-auto mw-100" controls>
                                <source :src="media.publicUrl" type="">
                                @Localizer.Media["Your browser does not support the video tag."]
                            </video>
                        </template>
                        <template v-else-if="media.type === 'Document'">
                            <div class="embed-responsive embed-responsive-4by3">
                                <iframe class="embed-responsive-item" :src="media.publicUrl"></iframe>
                            </div>
                        </template>
                        <template v-else>
                            <div class="py-5 text-center">
                                <h4 class="my-4">@Localizer.Media["Media preview is not available"]</h4>
                                <a :href="media.publicUrl" class="btn btn-primary btn-labeled" target="_blank"><i class="fas fa-external-link-alt"></i>@Localizer.Media["Open media in new tab"]</a>
                                <a :href="media.publicUrl" class="btn btn-primary btn-labeled" download><i class="fas fa-file-download"></i>@Localizer.Media["Download media"]</a>
                            </div>
                        </template>
                    </div>

                    <div class="tab-pane fade" id="pills-details">
                        <table class="table table-borderless m-0">
                            <tbody>
                                <tr>
                                    <th>@Localizer.General["Filename"]</th>
                                    <td>{{ media.filename }}</td>
                                </tr>
                                <tr>
                                    <th>@Localizer.General["Content type"]</th>
                                    <td>{{ media.contentType }}</td>
                                </tr>
                                <tr>
                                    <th>@Localizer.General["Size"]</th>
                                    <td>{{ media.size }}</td>
                                </tr>
                                <template v-if="media.width && media.height">
                                    <tr>
                                        <th>@Localizer.General["Dimensions"]</th>
                                        <td>{{ media.width }} x {{ media.height }}</td>
                                    </tr>
                                    <tr>
                                        <th>@Localizer.General["Width"]</th>
                                        <td>{{ media.width }} @Localizer.General["pixels"]</td>
                                    </tr>
                                    <tr>
                                        <th>@Localizer.General["Height"]</th>
                                        <td>{{ media.height }} @Localizer.General["pixels"]</td>
                                    </tr>
                                </template>
                                <tr>
                                    <th>@Localizer.General["Modified"]</th>
                                    <td>{{ media.lastModified }}</td>
                                </tr>
                                <tr>
                                    <th>@Localizer.General["Download"]</th>
                                    <td><a :href="media.publicUrl" download>@Localizer.Media["Download media"]</a></td>
                                </tr>
                                <tr>
                                    <th>@Localizer.General["URL"]</th>
                                    <td><a :href="media.publicUrl" target="_blank">@Localizer.General["Open public URL in new tab"]</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade" id="pills-meta">
                        <table class="table table-borderless m-0">
                            <tbody>
                                <tr>
                                    <th><span class="d-block mt-1">@Localizer.General["Title"]</span></th>
                                    <td><input type="text" class="form-control form-control-sm" v-model="media.title"></td>
                                </tr>
                                <tr>
                                    <th><span class="d-block mt-1">@Localizer.General["Alt text"]</span></th>
                                    <td><input type="text" class="form-control form-control-sm" v-model="media.altText"></td>
                                </tr>
                                <tr>
                                    <th><span class="d-block mt-1">@Localizer.General["Description"]</span></th>
                                    <td><textarea rows="5" class="form-control form-control-sm" v-model="media.description"></textarea></td>
                                </tr>
                                <tr v-for="property in media.properties">
                                    <th><span class="d-block mt-1">{{ property.key }}</span></th>
                                    <td><input type="text"class="form-control form-control-sm" v-model="property.value"></td>
                                </tr>
                                <tr>
                                    <td class="text-right" colspan="2">
                                        <button v-on:click.prevent="saveMeta(media)" class="btn btn-sm btn-success btn-labeled">
                                            <i class="fas fa-check"></i>@Localizer.General["Save"]
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade" id="pills-update">
                        <div id="media-update-container" class="dropzone-container">
                            <form action="@Url.Action("Upload", "MediaApi")" class="dropzone needsclick dz-clickable" enctype="multipart/form-data">
                                <input type="hidden" name="Model.Id" v-model="media.id" />
                                <input type="hidden" name="Model.ParentId" v-model="media.folderId" />
                                <div class="dz-message needsclick text-center">
                                    <span class="fas fa-cloud-upload-alt"></span>
                                    @Localizer.Media["Drop files here or click to upload."]
                                </div>
                                <div class="file-list"></div>
                            </form>
                            <ul class="media-list list-unstyled"></ul>
                        </div>
                    </div>

                    @foreach (var action in Piranha.Manager.Actions.Modals.MediaPreview)
                    {
                        <div class="tab-pane fade" id="@action.Uid">
                            <component v-bind:is="'@action.Component'" v-bind:uid="'@action.Uid'" v-bind:model="this"></component>
                        </div>
                    }
                </div>
            </div>

        </div>
    </div>
</div>